<!doctype html>
<html>

<head>
  <title>index</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
  <meta charset="utf-8"/>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<style type="text/css">
form label { width:100px;display:inline-block;float:left; }
form input[type="button"] { width:50px; }
form input[type="text"] { width:200px; }
</style>
</head>

<body>
  <form action="">
    <label>Actions</label>
    <input id="get" type="button" value="get"/>
    <input id="post" type="button" value="post"/>
    <input id="put" type="button" value="put"/>
    <input id="delete" type="button" value="delete"/>
    <input id="echoGet" type="button" value="echo(get)"/>
    <input id="echoPost" type="button" value="echo(post)"/>
    <br/>
    <label>Id</label> <input id="id" value="1"/><br/>
    <label>Name</label> <input id="name" value="name"/><br/>
    <label>Result</label> <div id="result"></div>
  </form>
</body>

<script type="text/javascript">
$(document).ready(function(){
	$("#get").click(function(){
		var id = $("#id").val();
		var name = $("#name").val();
		console.log(id);
		$.ajax({url:"sj/test/" + id, data: {name: name}, dataType:"json", method:"GET",
			success:function(data, status, xhr){
				$("#result").html(data.count == 1 ? data.rset[0].name : "count " + data.count);
			},
			error:function(xhr, status, e){
				$("#result").html("error " + xhr.responseText);
			}
		});
	});

	$("#post").click(function(){
		var id = $("#id").val();
		var name = $("#name").val();
		console.log(id);
		$.ajax({url:"sj/test/" + id, data: {name: name}, dataType:"json", method:"POST",
			success:function(data, status, xhr){
				$("#result").html("result " + data.rset + " status " + data.status + " count " + data.count);
			},
			error:function(xhr, status, e){
				$("#result").html("error " + xhr.responseText);
			}
		});
	});

	$("#put").click(function(){
		var id = $("#id").val();
		var name = $("#name").val();
		console.log(id);
		$.ajax({url:"sj/test/" + id, data: {name: name}, dataType:"json", method:"PUT",
			success:function(data, status, xhr){
				$("#result").html("result " + data.rset + " status " + data.status + " count " + data.count);
			},
			error:function(xhr, status, e){
				$("#result").html("error " + xhr.responseText);
			}
		});
	});

	$("#echoGet").click(function(){
		var id = $("#id").val();
		var name = $("#name").val();
		console.log(id);
		$.ajax({url:"sj/echo", data: {message: name}, dataType:"json", method:"GET",
			/*
			beforeSend: function(xhr){
				xhr.overrideMimeType("text/html;charset=UTF-8");
			},
			*/
			success:function(data, status, xhr){
				$("#result").html("result " + JSON.stringify(data.rset) + " status " + data.status + " count " + data.count);
			},
			error:function(xhr, status, e){
				$("#result").html("error " + xhr.responseText);
			}
		});
	});
	
	$("#echoPost").click(function(){
		var id = $("#id").val();
		var name = $("#name").val();
		console.log(id);
		$.ajax({url:"sj/echo", data: {message: name}, dataType:"json", method:"POST",
			/*
			beforeSend: function(xhr){
				xhr.overrideMimeType("text/html;charset=UTF-8");
			},
			*/
			success:function(data, status, xhr){
				$("#result").html("result " + JSON.stringify(data.rset) + " status " + data.status + " count " + data.count);
			},
			error:function(xhr, status, e){
				$("#result").html("error " + xhr.responseText);
			}
		});
	});
});
</script>

</html>
